<template>
  <!-- <dv-border-box-10 :color="['#50649a', '#50649b']"> -->
  <div class="move">
    <el-main>
      <!-- //中间区域 -->
      <div class="main1">
        <!-- 奖项内容 -->
        <div class="gpa">
          <my-three-rate></my-three-rate>
        </div>
        <!-- 两班平均绩点内容 -->
        <div class="threeRate">
          <my-gpa></my-gpa>
        </div>
      </div>
      <!-- 右侧区域 -->
      <div class="flat">
        <!-- 男女比例 -->
        <div class="sex">
          <my-sex></my-sex>
        </div>
        <!-- 班级挂科率 -->
        <div class="pass">
          <my-pass></my-pass>
        </div>
        <!-- 深造率 -->
        <div class="fight">
          <my-fight></my-fight>
        </div>
      </div>
    </el-main>
  </div>
  <!-- </dv-border-box-10> -->
</template>

<script>
import MyGpa from "@/components/MyGpa.vue";
import MyThreeRate from "@/components/MyThreeRate.vue";
import MyPass from "@/components/MyPass.vue";
import MyFight from "@/components/MyFight.vue";
import MySex from "@/components/MySex.vue";
export default {
  components: { MyGpa, MyThreeRate, MyPass, MyFight, MySex },
};
</script>

<style scoped>
@import url("@/global.css");
.move {
  position: relative;
  top: -15px;
  /* transform: scale(0.98); */
  width: 100%;
  height: 104%;
  box-sizing: border-box;
  /* background-color: aquamarine; */
}
/* 主体左右部分调节 */
.el-main {
  /* margin: 9px; */
  height: 100%;
  width: 1422px;

  /* border-radius: 10px;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  border-left: 1px solid rgba(255, 255, 255, 0.25); */
}
/* 左 */
.main1 {
  /* background-color: rgb(176, 245, 221); */
  float: left;
  /* box-sizing: border-box; */
  width: 58%;
  height: 33.7rem;
  margin-right: 15px;
  /* border-right: 1px solid #000; */
}
/* 右 */
.flat {
  display: flex;
  flex-direction: column; /* 子组件内部垂直排列 */
  justify-content: center;
  align-items: center;
  float: right;
  /* box-sizing: border-box; */
  width: 40%;
  height: 96%;
  /* background-color: rgb(220, 239, 183); */
  /* height: 740px; */
}

/* 左边图表部分 */
/* 奖项部分 */
.gpa {
  box-sizing: border-box;
  width: 100%;
  height: 55%;
  padding: 15px;
  /* background-color: rgb(216, 188, 243); */
}
/* 三率部分 */
.threeRate {
  width: 100%;
  height: 48%;
  /* background-color: rgb(243, 188, 188); */
  margin-top: -5px;
  padding: 15px;
  /* background-color: aqua; */
}
/* 右边图表 */
/* 男女比例部分 */
.sex {
  flex: 3.5;
  box-sizing: border-box;
  width: 100%;
  /* height: 28%; */
  /* background-color: rgb(229, 252, 179); */
}
/* 挂科率部分 */
.pass {
  flex: 4;
  box-sizing: border-box;
  width: 100%;
  /* height: 40%; */
  margin: 20px 0;
  /* background-color: rgb(184, 179, 252); */
}
/* 深造率部分 */
.fight {
  flex: 3;
  box-sizing: border-box;
  width: 100%;
  /* height: 28%;
  background-color: rgb(252, 179, 179); */
}
</style>